//提供一个能够显示xtx-message组件的函数
//这个函数可以直接导入使用  也可以挂载到vue实例原型上使用
//1. import  Messge  from '@/.../Message.js'   Message(type:'error',text:'文字提示信息')
//2. this.$Message(type:'error',text:'文字提示信息')
import { createVNode,render } from "vue";
import XtxMessage from "./xtx-message.vue";

//DOM容器
const div = document.createElement("div");
div.setAttribute("class", "xtx-message-container");
document.body.appendChild(div);

//定时器的标识
let t = null

export default ({ type, text }) => {
  //渲染组件
  //1.导入消息提示组件
  //2.将导入的组件编译为虚拟节点（DOM） 使用vue提供的createVNode(组件,{组件的自定义属性/props})方法
  const vnode = createVNode(XtxMessage, { type, text });
  //3.准备一个装载消息提示组件的DOM容器
  //4.将虚拟节点渲染到容器中   使用vue3提供的 render(虚拟节点,DOM容器)方法
  render(vnode, div);

  //3秒钟后销毁组件
  clearTimeout(t)
  t = setTimeout(()=>{
    render(null, div);
  },3000)
};
